/** @type {import('tailwindcss').Config} */
/**
 * Tailwind CSS 配置文件
 * ============================================================================
 * 该配置定义了 Tailwind CSS 的所有设置，包括内容路径、暗色模式和主题扩展
 * ============================================================================
 */
export default {
  // content: 指定 Tailwind 应该扫描的文件路径
  // Tailwind 会在这些文件中查找 CSS 类名并生成相应的样式
  content: [
    "./index.html",           // 主 HTML 文件
    "./src/**/*.{js,ts,jsx,tsx}", // 所有 React 组件文件
  ],

  // darkMode: 暗色模式配置
  // 'class' - 基于 CSS class 的暗色模式
  // 当 HTML 元素添加 'dark' class 时激活暗色模式
  // 对应于 [data-theme="dark"] 的实现
  darkMode: 'class',

  // theme: 主题配置
  theme: {
    // extend: 扩展默认主题
    // 这里可以添加自定义颜色、字体、间距等
    extend: {
      /**
       * 自定义颜色 (可选)
       * 示例:
       * colors: {
       *   primary: '#1890ff',
       *   secondary: '#13c2c2',
       * }
       */

      /**
       * 自定义字体 (可选)
       * 示例:
       * fontFamily: {
       *   sans: ['Poppins', 'sans-serif'],
       * }
       */

      /**
       * 自定义间距 (可选)
       * 示例:
       * spacing: {
       *   '128': '32rem',
       * }
       */
    },
  },

  // plugins: Tailwind 插件
  // 可以在这里添加第三方 Tailwind 插件扩展功能
  // 示例: require('@tailwindcss/forms')
  plugins: [],
};
